/* 
1 发送请求 获取文章列表数据 （参数自己的理解 写下来）
  1 为了后期方便修改 请求参数 定义成全局变量 
  2 定义函数 发送请求 获取数据 渲染页面 art-template 来渲染页面

2 动态渲染 文章类别 下拉框

3 动态渲染 分页组件 
*/

$(function(){
    let params = {
        // string	搜索关键词，可以为空，为空返回某类型所有文章
        key:'',
        // string	文章类型id，可以为空，为空返回所有类型文章
        type:'',
        // string	文章状态，草稿 ，已发布,为空返回所有状态文章
        state:'',
        // number	当前页，为空返回第1页
        page:1,
        // number	每页显示条数，为空默认每页6条
        perpage:10
    }

    // 1.2 发送请求获取文章列表数据 /admin/article/query
    function articleQuery (){
        $.get('/admin/article/query',params,function(res){
            //console.log(res)
            const html = template('trTpl',{list:res.data.data})
            $('tbody').html(html)

            renderPager(res.data.totalCount)
        })
    }
    // 2 发送请求 获取 文章列表数据
    function getcategoryList(params){
        $.get('/admin/category/list',function(res){
            //console.log(res)
            let html = "<option value =''>所有类型</option>"
            res.data.forEach(function(value){
                html += `<option value = '${value.id}'>${value.name}</option>`
            })
            $('#selCategory').html(html)
        })
    }
    // 3 动态渲染 分页组件
    function renderPager (count) {
        layui.laypage.render({
            elem:'pager',
            count,
            // 默认 每一页的数据条数 10,
            limit:params.perpage,
            // 显示页码
            curr:params.page,
            jump(obj,first){
                //首次不执行
                if(!first){
                    //获取被点击的页码
                    params.page = obj.curr
                    articleQuery()
                }
            }
            
        })
    }
    // 4  给筛选按钮 绑定点击事件
    $('#btnSearch').click(function(){
        //标题
        params.key = $('#aname').val()
        params.type = $('#selCategory').val()
        params.state = $('#selStatus').val()

        params.page = 1
        articleQuery ()
    })
    // 5 给重置按钮 绑定点击事件
    $('#btnReset').click(function(){
        // location.reload(); // 刷新页面   不行 不太好 
        // 为什么我们需要使用 ajax 异步网络请求 不要整个页面刷新 网页资源 图片 css文件 js 文件 字体图标  重新加载一次
        // 5.1 请求参数
        params = { key: "", type: "", state: "", page: 1, perpage: 10 } 
        // 5.2 搜索表单
        $("#aname").val("");
        // 文章类型
        $("#selCategory").val("");
        // 发布状态
        $("#selStatus").val("");
        
        // 5.3 重置分页组件  不需要做  因为在 获取文章列表的时候 内部 已经重置 组件
        // 5.4 刷新页面
        articleQuery();
    })

    articleQuery ()
    getcategoryList ()
    renderPager()
})